/**
 * 加载动画
 */
export const loading = {
  mounted(el, binding) {
    //在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。
    const options = binding.value || {}
    const container = document.createElement('div')
    container.className = 'loading-container'
    el.appendChild(container)

    const spinner = document.createElement('div')
    spinner.className = 'loading-spinner'
    spinner.style.borderTopColor = options.color || '#000' // 默认加载条颜色
    container.appendChild(spinner)

    el._loadingContainer = container

    console.log(el, binding, '插入动画')
  },
  updated(el, binding) {
    //在包含组件的 VNode 及其子组件的 VNode 更新后调用。
    console.log(el, binding, '更新动画')
    if (binding.value.isShow) {
      el._loadingContainer.style.display = 'block'
    } else {
      el._loadingContainer.style.display = 'none'
    }
  },
  unmounted(el) {
    //当指令与元素解除绑定且父组件已卸载时，只调用一次。、
    console.log(el, '移除动画')
    el._loadingContainer.remove()
    el._loadingContainer = null
  },
}
